<!--富文本-->
<template>
    <div style="height: 100%">
        <div id="div1">
<!--            <p>-->
<!--                <img :src="user.userFace"/>-->
<!--            </p>-->
        </div>
        <div style="height: 20px;">
            <el-button type="primary" @click="getRichTextHtml">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import E from "wangeditor"
    import {mapState} from "vuex";
    import eventBus from "../../../../eventBus";

    export default {
        name: "richText",
        data() {
            return {
                editor: null,
            }
        },
        created() {
        },
        mounted() {
            this.createRichText();
        },
        computed: {
            ...mapState({
                loginServiceApi: state => state.loginServiceApi,
                timeServiceApi: state => state.timeServiceApi,
                user: state => state.user
            })
        },
        methods: {
            //创建富文本
            createRichText() {
                this.editor = new E('#div1')
                this.editor.config.height = 200
                this.editor.config.menus = [
                    'head',          //标题
                    'bold',          //加粗
                    'fontSize',         //字号
                    'fontName',         //字体
                    'italic',           //斜体
                    'underline',        //下划线
                    'strikeThrough',    //删除线
                    'indent',           //缩进
                    'lineHeight',       //行高
                    'foreColor',        //文字颜色
                    'backColor',        //背景色
                    'link',             //连接
                    'list',             //序列
                    'todo',             //待办事项
                    'justify',          //对其
                    'quote',            //引用
                    'emoticon',         //表情
                    'image',            //图片
                    'video',            //视频
                    'table',            //表格
                    'code',             //代码
                    'splitLine',        //分割线
                    'undo',             //撤销与回退
                    'redo',             //全屏
                ]
                this.RichTextFileUpload(this.editor)
                this.editor.create()
            },
            //新增文章
            getRichTextHtml() {
                let html = this.editor.txt.html()
                if (html) {
                    let data = {
                        userid: JSON.parse(sessionStorage.getItem("user")).username,
                        content: html
                    }
                    this.postRequest(this.timeServiceApi + "/article/insertArticle", data).then(res => {
                        if (res.code == 200) {
                            this.$emit("outRichText")
                            res.data.adminVo = {
                                name: this.user.name,
                                username: this.user.username,
                                userFace: this.user.userFace
                            }
                            eventBus.$emit("insertArticle", res.data)
                            this.$message({
                                message: '发送成功！',
                                type: 'success'
                            });
                        }
                    })
                }
            },
            //图片上传
            RichTextFileUpload() {
                let editor = this.editor;
                editor.config.uploadImgHeaders = {
                    Authorization: window.sessionStorage.getItem("tokenStr")
                }
                editor.config.uploadFileName = 'file';
                editor.config.uploadImgHooks = {
                    // 上传图片之前
                    // before: function(xhr) {
                    //     console.log(xhr)
                    //
                    //     // 可阻止图片上传
                    //     return {
                    //         prevent: true,
                    //         msg: '需要提示给用户的错误信息'
                    //     }
                    // },
                    // 图片上传并返回了结果，图片插入已成功
                    // success: function(xhr) {
                    //     console.log('success', xhr)
                    // },
                    // // 图片上传并返回了结果，但图片插入时出错了
                    // fail: function(xhr, editor, resData) {
                    //     console.log('fail', resData)
                    // },
                    // // 上传图片出错，一般为 http 请求的错误
                    error: function (xhr, editor, resData) {
                        console.log('error', xhr, resData)
                    },
                    // // 上传图片超时
                    // timeout: function(xhr) {
                    //     console.log('timeout')
                    // },
                    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                    customInsert: function (insertImgFn, result) {
                        // result 即服务端返回的接口
                        console.log('customInsert', result)

                        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                        insertImgFn(result.data)
                    }
                }
                editor.config.uploadImgServer = '/timeapi/' + this.loginServiceApi + '/upload/'
            }
        }
    }
</script>

<style scoped>
    .el-button {
        margin: 10px 0px 10px 10px;
        float: right;
    }
    .richImage{
        margin: 10px 0;
    }
    .richImage .el-image {
        width: 150px;
        height: 150px;
        border-radius: 10px
    }
    .w-e-full-screen-editor {
        top: 60px;
    }
</style>
